<template>
  <!-- 在app组件注册使用 -->
  <div class="box">
    <ul>
      <li><router-link to="/">首页</router-link></li>
      <li><router-link to="/search">搜索</router-link></li>
      <li><router-link to="/user">个人中心</router-link></li>
      <li><router-link to="/login">登录</router-link></li>
      <li><router-link to="/register">注册</router-link></li>
      <li><router-link to="/collect">收藏</router-link></li>
      <li><router-link to="/manage">后台管理</router-link></li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Nav',
  setup () {
    const active = ref('home')
    return { active }
  }
}
</script>

<style lang="less" scoped>
.box{
  ul li{
    display: inline;
    list-style-type: none;
  }
  li{
    margin-left: 10%;
    cursor: pointer;
  }
  background-color: black;
  width: 100%;
  height: 35px;
  color: white;
  font-size: 10px;
  line-height: 35px;
  position: absolute;
  top: 0px;
  left: 0px;
}
a{
    color: white;
    text-decoration: none;
  }
</style>
